<template>
  <div class="ques">
    <div class="ques-title">
      <div class="title">错题数据库</div>
      <div class="export">
        <a href="http://43.136.116.70:8080/api/manage/export"
          ><el-button>导出数据</el-button></a
        >
      </div>
    </div>
    <div class="ques-conter">
      <el-table
      ref="table"
        :data="displayedDataWithIndex"
        border
        style="width: 100%"
        :header-cell-style="{
          background: '#f0f7fe',
          color: '#467ee1',
          fontSize: '16px',
        }"
        @sort-change="changeSort"
        :default-sort="{ prop: 'date', order: 'ascending' }"
      >
        <el-table-column prop="id" label="序号" width="100" align="center">
          <template slot-scope="{ $index }">
            {{ startIndex + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="questionText"
          label="题目"
          min-width="25%"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="wrongCount"
          label="错题次数"
          min-width="10%"
          sortable
          :sort-orders="['ascending', 'descending']"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.wrongCount + "次" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="类型"
          min-width="10%"
          align="center"
        >
          <template #default="scope">
            {{
              scope.row.questionType == 1
                ? "多选题"
                : scope.row.questionType == 0
                ? "单选题"
                : "判断题"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="optionsText"
          label="选择项"
          min-width="25%"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="answerText"
          label="答案"
          min-width="10%"
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems"
        style="margin-top: 25px"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { GetWroQuesData } from "../api/statistics";
// import { getExaminerInformation } from '@/api/statistics'

export default {
  data() {
    return {
      displayedData: [], // 当前页显示的数据
      currentPage: 1, // 当前页面
      pageSize: 10, // 每页显示的数据条数
      totalItems: 0, // 总数据条数
      startIndex: 0, //当前页数据的起始索引
      sort: 0, //排序 默认升序
      tableData: [],
    };
  },
  computed: {
    displayedDataWithIndex() {
      return this.displayedData;
    },
  },
  mounted() {
    this.handleCurrentChange(this.currentPage);
  },
  methods: {
    //调用接口获取数据
    async getAllExaminer(newPage) {
      let res = await GetWroQuesData({
        sort: this.sort,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
      this.tableData = res.data.data.wrongQuestions;
      this.totalItems = res.data.data.total;
      this.startIndex = (newPage - 1) * this.pageSize;
      //页面展示数据
      this.displayedData = this.tableData.map((row, index) => {
        return {
          ...row,
          index: this.startIndex + index + 1,
        };
      });
    },

    //更改表格展示条数
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getAllExaminer(this.currentPage);
    },
    //切换表格第几页,每次切换页面重新发起请求获取数据
    async handleCurrentChange(newPage) {
      
      this.currentPage = newPage;
      let res = await GetWroQuesData({
        sort: this.sort,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
      this.tableData = res.data.data.wrongQuestions;
      // console.log(res.data.data,13456777);
      // console.log(this.tableData);
      this.totalItems = res.data.data.total;

      this.startIndex = (newPage - 1) * this.pageSize;
      //页面展示数据
      this.displayedData = this.tableData.map((row, index) => {
        return {
          ...row,
          index: this.startIndex + index + 1,
        };
      });

      this.$parent.$parent.$parent.$parent.scrollToTopW();
    },
    //排序
    changeSort(val) {
      // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数
      if (val.order === "descending") {
        this.sort = 1;
      } else {
        this.sort = 0;
      }
      this.handleCurrentChange(this.currentPage);
    },
  },
  watch: {
    
  },
};
</script>
<style lang="scss" scoped>
.ques-title {
  display: flex;
  // justify-content: space-between;
  width: 70%;
  margin-bottom: 30px;

  // background-color: red;
  .title {
    font-size: 16px;
    font-weight: 700;
    margin-right: 50px;
    margin-left: 20px;
    text-align: center;
    line-height: 35px;
  }
}

.ques-conter {
  width: 100%;
}

:deep(.el-pager li.active) {
  color: #ffffff;
  background-color: #409eff;
}

:deep(.el-pager li:hover) {
  color: #787d83;
}

.el-pagination {
  margin: 25px 0;
}
</style>
